<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no">
	<title>大数据融合与挖掘分析平台</title>
	<link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
	<link href="/css/common.css" type="text/css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="/css/nav.css">
	<link rel="stylesheet" type="text/css" href="/css/iconfont.css">
	<script src="/js/jquery-3.2.1.min.js"></script>
	<script src="/layui/layui.js"></script>
	<script src="/js/alert.js"></script>
	<script src="/js/echarts.min.js"></script>
</head>
<body>
<!-- 头部导航 -->
<!--主内容框架-->
<div class="main_height main_index lt" style="background: #f2f4f8;">
	<div class="layui-btn-group demoTable jzy_w_max br_h_0 tabTop">
		<button class="layui-btn layui-btn-sm layui-btn-normal" id="createModel">新建任务</button>

	</div>
	<div style="width:100%;padding-left: 1px;">
		<table id="modelListTable" lay-filter="modelListTable"></table>
	</div>
</div>

<!--弹窗添加或修改内容必备的代码-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">新增</h4>
			</div>
			<div class="modal-body">

				<div class="form-group">
					<label for="txt_departmentname">部门名称</label>
					<input type="text" name="txt_departmentname" class="form-control" id="txt_departmentname" placeholder="部门名称">
				</div>
				<div class="form-group">
					<label for="txt_parentdepartment">上级部门</label>
					<input type="text" name="txt_parentdepartment" class="form-control" id="txt_parentdepartment" placeholder="上级部门">
				</div>
				<div class="form-group">
					<label for="txt_departmentlevel">部门级别</label>
					<input type="text" name="txt_departmentlevel" class="form-control" id="txt_departmentlevel" placeholder="部门级别">
				</div>
				<div class="form-group">
					<label for="txt_statu">描述</label>
					<input type="text" name="txt_statu" class="form-control" id="txt_statu" placeholder="状态">
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
				<button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript" src="/js/nav.js"></script>
<script src="/js/jump.js"></script>
<!-- 这里的 checked 的状态只是演示 -->
<script type="text/html" id="switchTpl">
	<a class="layui-btn layui-btn-xs" style="padding:0 15px !important;" lay-event="detail">点击查看执行结果</a>
</script>
<!-- 这里的 操作 的html插入演示 -->
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-danger layui-btn-xs" style="padding:0 15px !important;" lay-event="del1">删除</a>
	<a class="layui-btn layui-btn-xs" style="padding:0 15px !important;" lay-event="exe" >执行</a>
</script>
<script type="text/javascript" th:inline="javascript">
	var modelTableList=null;
	/*<![CDATA[*/
	var modelHref= /*[[@{/page/model?}]]*/ null;
	/*]]>*/
	/*<![CDATA[*/
	var jobHref= /*[[@{/page/job?}]]*/ null;
	/*]]>*/

	$("#createModel").on('click',function(){
		$('#myModal').modal();
		layer.prompt({title: '请输入模型名称'}, function(val, index){
			var dataString={"name":val,"description":null};
			$.ajax({
				type: "POST",
				dataType: "json",
				async:false,
				url: "/modelAdd.do",
				data:dataString,
				success: function (response) {
					if(response.status==0){
						modelTableList.reload({
						});
						var uuid=response.msg.split(":")[1];
						uuid=uuid.replace(/\s*/g,"");//去掉空格
						location.href = modelHref+"modelname="+val+"&uuid="+uuid;
					}
				},
				error : function(response) {
					console.log('error');
				}
			});
			layer.close(index);
			layer.msg('您输入的模型名称是：'+ val);
		});
	});
	layui.use(['form', 'table', 'laydate', 'tree'], function() {
		var table = layui.table,
				form = layui.form,
				laydate = layui.laydate;
		laydate.render({
			elem: '#date',
			type: 'datetime',
			value: new Date()
		});
		// 开启一个数据表格
		modelTableList=table.render({
			elem: '#modelListTable',
			method:'post',
			url: '/getModelListAll.do' ,//数据接口
			page: true,//开启分页
			limit: 10,//默认分页条数
			height: 'full', //高度最大化
			id:'modelTable',
			cols: [
				[ //表头
					{
						type: 'checkbox'
					} ,// 开启多选框
					{
						field: 'id',
						title:'ID',
						hide:'true',
						align: 'center',

					} // 开启多选框
					, {
					field: 'name',
					title: '名称',
					width: '25%',
					align: 'center',
					edit: 'false'
				}, {
					field: 'modelString',
					title: '算法',
					width: '15%',
					align: 'center'
				}, {
					field: 'timeChange',
					title: '创建时间',
					width: '15%',
					align: 'center',
					sort: true,
					templet: function(d){return layui.util.toDateString(d.timePublish, "yyyy-MM-dd HH:mm:ss");},
				}, {
					field: 'modelString',
					title: '执行结果',
					width: '20%',
					align: 'center',
					templet: '#switchTpl',
					unresize: true,
					event:'showModelString'
				}
					, {
					field: 'operation',
					title: '操作',
					width: '21.5%',
					align: 'center',
					toolbar: '#barDemo'
				}
				]
			],
			// 默认数据
			parseData: function(res){ //res 即为原始返回的数据
				return {
					"code": res.status, //解析接口状态
					"count":res.count,
					"data": res.data, //解析数据列表
				};
			}
		});
		var $ = layui.$, active = {
			reload: function(){
				var searchName=$("#searchName").val();
				//执行重载
				table.reload('modelTable', {
					method:'post',
					url: '/getModelByName.do' ,//数据接口
					page: {curr: 1},
					where: {name: searchName},
					parseData: function(res){ //res 即为原始返回的数据
						var searchresult=[];
						searchresult.push(res.data);
						return {
							"code": res.status, //解析接口状态
							"data": searchresult, //解析数据列表
							"count":1,
						};
					},
				});
			}
		};
		$("#searchTable").on('click',function(){
			var type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		});
		// 监听数据表格中的单元格编辑
		table.on('tool(modelListTable)', function(obj){
			var data = obj.data;
			console.log(data)
			if(obj.event == 'del1'){
				layer.confirm('确认删除吗？', function(index){
					$.ajax({
						type: "POST",
						dataType: "json",
						url: "/modelRemoveByName.do",
						data: {
							"name":data.name
						},
						success: function (response) {
							if(response.status==0){
								table.reload('modelTable',{});
							}else{
								layer.alert("删除失败！请先删除运用该模型的任务");
							}
						},
						error : function() {
							layer.alert("提交失败");
						}
					});
					layer.close(index);
				});
			} else if(obj.event == 'edit'){
				location.href = modelHref;
			}else if(obj.event === 'showModelString'){
				console.log(data.modelString);
				var modelString=JSON.stringify(data.modelString);
				console.log(modelString);
				location.href = modelHref+"modelString="+ null +"&modelname="+data.name ;
			}else if(obj.event === 'exe'){
				location.href=jobHref+"modelname="+data.name+"&modelId="+data.uuid;
			}
		});
	});
</script>
</body>
</html>
